<template>
  <div id="s">
    <el-form :inline="true" :model="orderForm" :rules="formRules" ref="orderFormRule" style="text-align: left">
      <div style="text-align: right; margin-right:50px;">
        <el-form-item v-if="this.$store.state.orderOperationType !== 'checkOrder'">
          <el-button type="info" @click="saveOrder()" plain>保存</el-button>
          <el-button type="info" @click="cancel()" plain>取消</el-button>
        </el-form-item>
        <el-form-item v-if="this.$store.state.orderOperationType === 'checkOrder'">
          <el-button type="info" @click="cancel()" plain>返回</el-button>
        </el-form-item>
      </div>
      <!--  基本信息-->
      <div  class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;基本信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form-item label="委托单号">
            <el-input v-model="orderForm.orderId" placeholder="委托单号" disabled></el-input>
          </el-form-item>
          <el-form-item label="委托客户" prop="orderCustomerId" >
            <el-select v-model="orderForm.orderCustomerId" filterable placeholder="请选择" :disabled="disabled">
              <el-option
                v-for="item in baseCustomerList"
                :key="item.customerId"
                :label="item.customerName"
                :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="取货日期" prop="pickupDate">
            <el-date-picker style="width: 100%;"
              v-model="orderForm.pickupDate"
              type="date"
              value-format="yyyy-MM-dd"
              :disabled="disabled"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="订单类型" placeholder="请选择" prop="transportType">
            <el-select v-model="orderForm.transportType" :disabled="disabled">
              <el-option
                v-for="item in transportTypeList"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <br/>
          <el-form-item label="创建人">
            <el-input v-model="orderForm.operator" placeholder="创建人" disabled></el-input>
          </el-form-item>
          <el-form-item label="创建时间" v-if="this.$store.state.orderOperationType === 'checkOrder'">
            <el-input v-model="orderForm.createTime" placeholder="创建时间" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <!--  收发货人信息-->
      <div  class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;收发货人信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form-item label="发货人姓名" prop="consignorName">
            <el-input v-model="orderForm.consignorName" placeholder="发货人姓名" clearable :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="发货人电话" prop="consignorTel">
            <el-input v-model="orderForm.consignorTel" placeholder="发货人电话" clearable :disabled="disabled"></el-input>
          </el-form-item>
          <!--  城市级联菜单，注意 props属性的配置   -->
          <el-form-item label="发货地址" prop="consignorAddress">
            <el-cascader
              v-model="orderForm.consignorAddress"
              :options="baseCityList"
              :disabled="disabled"
              filterable
              :props="props"></el-cascader>
          </el-form-item>
          <el-form-item label="发货详细地址" prop="consignorAddressDetail">
            <el-input v-model="orderForm.consignorAddressDetail" placeholder="发货详细地址" clearable :disabled="disabled"></el-input>
          </el-form-item>
          <br/>
          <el-form-item label="收货人姓名" prop="consigneeName">
            <el-input v-model="orderForm.consigneeName" placeholder="发货人姓名" clearable :disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="收货人电话" prop="consigneeTel">
            <el-input v-model="orderForm.consigneeTel" placeholder="发货人电话" clearable :disabled="disabled"></el-input>
          </el-form-item>
          <!--  城市级联菜单，注意 props属性的配置   -->
          <el-form-item label="收货地址" prop="consigneeAddress">
            <el-cascader
              v-model="orderForm.consigneeAddress"
              :disabled="disabled"
              :options="baseCityList"
              filterable
              :props="props"></el-cascader>
          </el-form-item>
          <el-form-item label="收货详细地址" prop="consigneeAddressDetail">
            <el-input v-model="orderForm.consigneeAddressDetail" placeholder="发货详细地址" clearable :disabled="disabled"></el-input>
          </el-form-item>
        </div>
      </div>
      <!-- 货物明细-->
      <div  class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;货物信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form-item label="重量合计(KG)">
            <el-input v-model="orderForm.weight" disabled></el-input>
          </el-form-item>
          <el-form-item label="体积合计(m³)">
            <el-input v-model="orderForm.volume" disabled></el-input>
          </el-form-item>
          <el-form-item v-if="this.$store.state.orderOperationType !== 'checkOrder'">
            <el-button type="primary" @click="goodsAdd()" plain>添加货物</el-button>
          </el-form-item>
          <!--  货物明细数据表格-->
          <el-table :data="goodsTableData" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="180"
              align="center"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="货物名称"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="数量"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsUnit"
              label="计量单位"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsWeight"
              label="重量(KG)"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsVolume"
              label="体积(m³)"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              v-if="this.$store.state.orderOperationType !== 'checkOrder'"
              width="180">
              <template v-slot="scope">
                <el-button  @click="goodsEdit(scope.row)" type="text" size="small">编辑</el-button>
                <el-popconfirm title="确定删除吗？" @confirm="goodsRemove(scope.row)">
                  <el-button  slot="reference" type="text" size="small">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 费用明细-->
      <div  class="myBorder ">
        <el-row style="margin-bottom: 20px">
          <el-col :span="24"><div class="grid-content bg-purple-light">
            <div class="separate" >&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-tickets"></i>&nbsp;&nbsp;费用信息</div>
          </div></el-col>
        </el-row>
        <div style="margin-left: 20px">
          <el-form-item label="费用合计(元)">
            <el-input v-model="orderForm.orderFee" disabled></el-input>
          </el-form-item>
          <el-form-item v-if="this.$store.state.orderOperationType !== 'checkOrder'">
            <el-button type="primary" @click="feeAdd()" plain>添加费用</el-button>
          </el-form-item>
          <!--  费用明细数据表格-->
          <el-table :data="feeTableData" stripe style="width: 100%" :header-cell-style="{background:'#f7f7f7', color:'#666666'}">
            <el-table-column
              label="序号"
              width="180"
              align="center"
              type="index"
              fixed>
            </el-table-column>
            <el-table-column
              prop="feeName"
              label="费用名称"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="feeTax"
              label="税率(%)"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="feeIncludeTax"
              label="价税合计(元)"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              v-if="this.$store.state.orderOperationType !== 'checkOrder'"
              width="180">
              <template v-slot="scope">
                <el-popconfirm title="确定删除吗？" @confirm="feeRemove(scope.row)">
                  <el-button slot="reference" type="text" size="small">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <!--  货物新增/修改页面-->
    <el-dialog
      :title="goodsTitle"
      :visible.sync="showGoods"
      style="text-align: left"
      width="30%">
      <span>
        <el-form :model="goodsForm" :rules="goodsRules" ref="goodsRuleForm" label-width="80px">
          <el-form-item label="货物名称" prop="goodsName">
             <el-input v-model="goodsForm.goodsName" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="goodsNum">
            <el-input-number v-model="goodsForm.goodsNum" :min="1" style="width: 100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="计量单位" prop="goodsUnit">
             <el-input v-model="goodsForm.goodsUnit" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item label="重量(KG)" prop="goodsWeight">
             <el-input-number v-model="goodsForm.goodsWeight" :precision="2" :step="0.01" :min="0.01" style="width: 100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="体积(m³)" prop="goodsVolume">
             <el-input-number v-model="goodsForm.goodsVolume" :precision="2" :step="0.01" :min="0.01" style="width: 100%;"></el-input-number>
          </el-form-item>
            <el-input v-model="goodsForm.id" type="hidden" style="float: left"></el-input>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showGoods = false">取 消</el-button>
        <el-button type="primary" @click="goodsSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!--  费用新增页面-->
    <el-dialog
      title="添加费用"
      :visible.sync="showFee"
      style="text-align: left"
      width="30%">
      <span>
        <el-form :model="feeForm" :rules="feeRules" ref="feeRuleForm" label-width="110px">
          <el-form-item label="费用名称" prop="feeName">
             <el-input v-model="feeForm.feeName" style="width: 100%;"></el-input>
          </el-form-item>
          <el-form-item label="税率(%)" prop="feeTax">
            <el-input-number v-model="feeForm.feeTax" :min="0" style="width: 100%;"></el-input-number>
          </el-form-item>
          <el-form-item label="价税合计(元)" prop="feeIncludeTax">
             <el-input-number v-model="feeForm.feeIncludeTax" :precision="2" :step="0.01" :min="0.01" style="width: 100%;"></el-input-number>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showFee = false">取 消</el-button>
        <el-button type="primary" @click="feeSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "OrderOperate",
  data() {
    return {
      //订单信息表单
      orderForm: {},
      // 表单元素禁用
      disabled: false,
      //运输类型
      transportTypeList: ['整车','散货'],
      //委托客户
      baseCustomerList: [],
      //城市数据
      baseCityList: [],
      //城市级联菜单属性设置
      props:{
        value: 'id',
        label: 'cityName',
        children: 'cityChildrenList',
        checkStrictly: true,   //若为false则必须为顺序选择才能显示
        emitPath: false     // false只获得最近一层父级， ture 获得所有父级
      },
      // 订单表单校验对象
      formRules: {
        orderCustomerId: [{required: true, message: '请选择委托客户', trigger: 'change'}],
        pickupDate: [{required: true, message: '请选择取件日期', trigger: 'change'}],
        transportType: [{required: true, message: '请选择运输类型', trigger: 'change'}],
        consignorName: [{required: true, message: '请输入发货人姓名', trigger: 'blur'}],
        consignorTel: [{required: true, message: '请输入发货电话', trigger: 'blur'}],
        consignorAddress: [{required: true, message: '请选择发货地址', trigger: 'blur'}],
        consignorAddressDetail: [{required: true, message: '请输入发货详细地址', trigger: 'change'}],
        consigneeName: [{required: true, message: '请输入收货人姓名', trigger: 'blur'}],
        consigneeTel: [{required: true, message: '请输入收货电话', trigger: 'blur'}],
        consigneeAddress: [{required: true, message: '请选择收货地址', trigger: 'blur'}],
        consigneeAddressDetail: [{required: true, message: '请输入收货详细地址', trigger: 'change'}],
      },
      //货物数据表
      goodsTableData: [],
      //货物提交表单
      goodsForm: {},
      //货物显示新增、修改
      showGoods: false,
      //货物表单标题
      goodsTitle: '',
      //货物表单校验对象
      goodsRules: {
        goodsName: [{required: true, message: '请输入货物名称', trigger: 'blur'}],
        goodsNum: [{required: true, message: '输入数量', trigger: 'change'}],
        goodsUnit: [{required: true, message: '请输入计量单位', trigger: 'blur'}],
        goodsWeight: [{required: true, message: '输入重量', trigger: 'change'}],
        goodsVolume: [{required: true, message: '请输入体积', trigger: 'change'}],
      },
      //费用数据表
      feeTableData: [],
      //费用提交表单
      feeForm: {},
      //显示费用新增
      showFee: false,
      //费用表单校验对象
      feeRules: {
        feeName: [{required: true, message: '请输入费用名称', trigger: 'blur'}],
        feeTax: [{required: true, message: '输入税率', trigger: 'change'}],
        feeIncludeTax: [{required: true, message: '请输入价税合计金额', trigger: 'change'}],
      }
    }
  },
  methods: {
    cancel() {
        this.$router.back()
    },
    // 保存订单表单数据
    saveOrder() {
      this.$refs['orderFormRule'].validate((valid) => {
        if (valid) {
          //校验通过
          if (this.$store.state.orderOperationType === 'addOrder') {
            this.$refs['orderFormRule'].validate((valid) => {
              if (valid) {
                this.$axios({
                  url: 'order/form/add',
                  method: 'post',
                  data: this.orderForm
                }).then(res => {
                  if (res.data.success) {
                    this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                   this.$router.push('OrderForm')
                  } else {
                    this.$message.error(res.data.message);
                  }
                }).catch(err => {
                  this.$message.error(err.message);
                })
              }
            });
          } else {
            this.$axios({
              url: 'order/form/edit',
              method: 'post',
              data: this.orderForm
            }).then(res => {
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.$router.push('OrderForm')
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(err => {
              this.$message.error(err.message);
            })
          }
        }
      });
    },
    // 获取全部客户数据
    getCustomerList() {
      this.$axios({
        url: 'base/customer/listAll',
        method: 'post'
      }).then(res => {
        //全部客户数据赋值给下拉菜单数组
        if (res.data.success) {
          this.baseCustomerList = res.data.object;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 获取全部城市数据
    getCityList(){
      this.$axios({
        url: 'base/city/listAll',
        method: 'post'
      }).then(res=>{
        //全部城市数据赋值给级联菜单数组
        if (res.data.success) {
          this.baseCityList = res.data.object;
        }
      }).catch(err=>{
        this.$message.error(err.message);
      })
    },
    //获取货物表格数据
    getGoodsList() {
      this.$axios({
        url: 'order/goods/list/' + this.orderForm.orderId,
        method: 'post'
      }).then(res => {
        if (res.data.success) {
          this.goodsTableData = res.data.object.orderGoodsList;
          this.orderForm.weight = res.data.object.weightTotal;
          this.orderForm.volume = res.data.object.volumeTotal;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 添加货物
    goodsAdd() {
      //设置标题
      this.goodsTitle = '添加货物'
      //显示对话框
      this.showGoods = true
      //清空表单
      this.goodsForm = {}
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['goodsRuleForm'].clearValidate();
      })
    },
    // 修改货物
    goodsEdit(row) {
      this.goodsTitle = '修改货物'
      //清空表单
      this.goodsForm = {}
      //给goodsForm对象赋值
      this.goodsForm = Object.assign({}, row);
      //显示对话框
      this.showGoods = true
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['goodsRuleForm'].clearValidate();
      })
    },
    // 货物添加或修改提交
    goodsSubmit() {
      this.$refs['goodsRuleForm'].validate((valid) => {
        if (valid) {
          //校验通过
          if (this.goodsTitle === '添加货物') {
            this.$refs['goodsRuleForm'].validate((valid) => {
              if (valid) {
                this.$axios({
                  url: 'order/goods/add/' + this.orderForm.orderId,
                  method: 'post',
                  data: this.goodsForm
                }).then(res => {
                  if (res.data.success) {
                    this.showGoods = false;
                    this.getGoodsList()
                  } else {
                    this.$message.error(res.data.message);
                  }
                }).catch(err => {
                  this.$message.error(err.message);
                })
              }
            });
          } else {
            // 编辑货物
            this.$axios({
              url: 'order/goods/edit',
              method: 'post',
              data: this.goodsForm
            }).then(res => {
              if (res.data.success) {
                this.showGoods = false;
                this.getGoodsList()
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(err => {
              this.$message.error(err.message);
            })
          }
        }
      });
    },
    // 删除货物
    goodsRemove(row) {
      this.$axios({
        url: 'order/goods/remove',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {
          this.getGoodsList()
          this.$message({
            message: res.data.message,
            type: 'success'
          });
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 获取费用表格数据
    getFeeList() {
      this.$axios({
        url: 'order/fee/list/' + this.orderForm.orderId,
        method: 'post'
      }).then(res => {
        if (res.data.success) {
          this.feeTableData = res.data.object.orderFeeList;
          this.orderForm.orderFee = res.data.object.orderFeeTotal;
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 添加费用
    feeAdd() {
      //显示对话框
      this.showFee = true
      //清空表单
      this.feeForm = {}
      //清空校验结果
      this.$nextTick(() => {
        this.$refs['feeRuleForm'].clearValidate();
      })
    },
    // 添加费用提交
    feeSubmit() {
      this.$refs['feeRuleForm'].validate((valid) => {
        if (valid) {
          //校验通过
          this.$axios({
            url: 'order/fee/add/' + this.orderForm.orderId,
            method: 'post',
            data: this.feeForm
          }).then(res => {
            if (res.data.success) {
              this.showFee = false;
              this.getFeeList()
            } else {
              this.$message.error(res.data.message);
            }
          }).catch(err => {
            this.$message.error(err.message);
          })
        }
      });
    },
    // 删除费用
    feeRemove(row) {
      this.$axios({
        url: 'order/fee/remove',
        method: 'post',
        data: row
      }).then(res => {
        if (res.data.success) {
          this.getFeeList()
          this.$message({
            message: res.data.message,
            type: 'success'
          });
        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 清空未生成订单的货物列表
    clearGoodsList(){
      this.$axios({
        url: 'order/goods/clearGoodsList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {

        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    // 清空未生成订单的费用列表
    clearFeeList(){
      this.$axios({
        url: 'order/fee/clearFeeList',
        method: 'post',
      }).then(res => {
        if (res.data.success) {

        } else {
          this.$message.error(res.data.message);
        }
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
  },
  created() {
    this.orderForm = {}
    this.getCustomerList()
    this.getCityList()
    // 判断订单操作类型是否为新增订单
    if(this.$store.state.orderOperationType === 'addOrder'){
      // 删除之前未提交订单的货物信息
      this.clearGoodsList()
      // 删除之前未提交订单的费用信息
      this.clearFeeList()
      // 新增订单编号临时赋值为WT************
      this.orderForm.orderId = 'WT************'
      // 创建人赋值
      this.orderForm.operator = this.$store.state.loginUserName
      // 取消表单元素禁用
      this.disabled = false
    }else {
      this.orderForm = Object.assign({},this.$store.state.currentOrder);
      this.goodsTableData = this.$store.state.currentOrder.orderGoodsList
      this.feeTableData = this.$store.state.currentOrder.orderFeeList
      // 判断订单操作类型是否为查看订单
      this.disabled = this.$store.state.orderOperationType === 'checkOrder';
    }
  },
}
</script>

<style scoped>
.el-select {
  width: 100%;
}
.myBorder {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin: 20px 0;
}
.separate {
  width: 100%;height: 50px;background: #339999;border-color: #339999;text-align: left;line-height:50px;color: #FFFFFF;
}
#s{
  width:90%;
  margin:10px auto;
  background-color: #ffffff;
  box-shadow: 10px 10px 5px #c4c6c7;
  border-radius: 5px
}
.el-button--info:hover {
  background: #209e91;
  border-color: #209e91;
  color: #FFF;
}
</style>
